<template>
  <div class="cui_bd">
    <div class="reg_wrap hh_reg_wrap">
      <ul class="reg_step">
        <li class="current"><span></span>验证手机</li>
        <li><span></span>设置密码</li>
        <li><span></span>注册成功</li>
      </ul>
      <div class="reg_form reg_form_step1">
        <dl>
          <dt class="label">手机号</dt>
          <dd>
            <div class="r_input input_country-code" id="reg_countrycode">中国大陆 86<a href="javascript:;" class="link_code"></a></div>
            <input class="r_input input_country-code_num bbz-js-iconable-input" type="text" placeholder="有效手机号" id="mobilephone" v-model.number.trim="phone" maxlength="11" @focus="Focus" @blur="Focus" @input="show()">
            <input type="hidden" id="codeResult" value="86">
            <input type="hidden" id="nameResult" value="中国大陆">
            <i class="iconfont icon-delete" @click="phone='';iconShow=false" v-if="iconShow==true"></i>
          </dd>
        </dl>
        <div class="base_error" id="errphone" v-html="phoneerr"></div>

        <dl id="dlslideCode">
          <dt class="label">滑块验证</dt>
          <dd>
            <div class="slider">
              <Slider :h="40" @getStatus="getStatus"></Slider>
            </div>
          </dd>
        </dl>
        <div class="base_error" style="display: none" id="errslider"></div>

        <dl>
          <dt class="label">短信验证码</dt>
          <dd>
            <div class="r_input input_auth-code">
              <input class=" bbz-js-iconable-input" type="text" placeholder="6位数字" id="valcode" maxlength="6" v-model="code">
              <a href="javascript:;" id="sendvalcode" @click="sendCode">发送验证码</a>
            </div>
          </dd>
        </dl>
        <div class="base_success" style="display: none" id="valcodetips"></div>

        <dl style="font-size:12px">
          <dt class="label">&nbsp;</dt>
          <dd><label class="base_label">同意
              <a id="agreementUrl" href="javascript:;">《服务协议》</a>和<a id="policyUrl" href="javascript:;">《隐私政策》</a></label>
          </dd>
        </dl>
        <dl class="form_space">
          <dt class="label">&nbsp;</dt>
          <dd><input class="reg_btn" type="submit" value="下一步，设置密码" id="regBtn" @click="next"><br>
            <a id="questionUrl" href="javascript:;" style="font-size:12px">企业客户注册</a>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import Slider from '@/components/Slider.vue'
import { mapState } from 'vuex'

import code from '@/utils/code'
export default {
  name: 'RegisterOne',
  components: {
    Slider
  },
  data() {
    return {
      phone: '',
      code: '',
      phoneerr: '',
      sliderStatus: false,
      iscode: false,
      iconShow: false
    }
  },
  computed: {
    EXPphone() {
      return /^1[1356789]\d{9}$/.test(this.phone)
    },
    ...mapState({
      isreg: state => {
        return state.register.isreg
      }
    })
  },
  watch: {
    phone() {
      this.iconShow = true
    },
    isreg() {
      this.phoneerr = '该手机号已注册过'
    }
  },
  methods: {
    sendCode() {
      if (this.EXPphone == true && this.iscode == false) {
        this.code = code(6)
        this.iscode = true
      }
    },
    Focus() {
      if (this.phone != '') {
        if (!this.EXPphone) {
          this.phoneerr = '手机格式错误，以1[3/5/6/7/8/9]开头，11位'
        } else {
          this.phoneerr = ''
          this.iconShow = false
        }
      }
      if (this.isreg == 1 && this.EXPphone == true) {
        this.phoneerr = '该手机号已注册过'
      }
      if (this.EXPphone == true) {
        this.$store.dispatch('isregister', this.phone)
      }
    },
    getStatus(data) {
      this.sliderStatus = data
    },
    next() {
      if (this.EXPphone == true && this.code != '' && this.sliderStatus == true) {
        this.$store.dispatch('changeShowNum', {
          num: 2,
          phone: this.phone
        })
        this.$store.dispatch('changeShowNums',0)
      }
    },
    show() {
      this.iconShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-delete {
  font-size: 16px;
  color: #666;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
}
input[type='text'] {
  border-radius: 0;
}
input[type='button'],
input[type='submit'] {
  -webkit-appearance: none;
}
.link_code {
  display: inline-block;
  background: url('../assets/images/un_reg_7.4.png') 0 -9999em no-repeat;
  vertical-align: middle;
}
.base_error {
  color: red;
  font-size: 15px;
  padding-left: 150px;
}
.r_input {
  height: 24px;
  padding: 5px;
  line-height: 24px;
  border: 1px solid #ddd;
  font-size: 15px;
  color: #bbb;
}
.cui_bd {
  margin: 20px auto;
  width: 1000px;
  padding: 0 10px;
  min-height: 500px;
  .hh_reg_wrap {
    padding: 0;
    position: relative;
    z-index: 1;
    min-height: 350px;
  }
  .reg_step {
    margin: 0 0 30px -12px;
    li {
      display: inline-block;
      background: url('../assets/images/un_reg_7.4.png') 0 -9999em no-repeat;
      vertical-align: middle;
      float: left;
      margin-left: 12px;
      background-position: 255px -285px;
      color: #9a9a9a;
      font-size: 12px;
      span {
        display: inline-block;
        margin-right: 5px;
        height: 5px;
        line-height: 0;
        background-color: #ddd;
        border-radius: 3px;
        vertical-align: middle;
        width: 270px;
      }
      &.current {
        background-position: 256px -228px;
        color: #799d08;
        span {
          background-color: #acd252;
        }
      }
    }
  }
  .reg_form {
    padding-top: 50px;
    margin-top: -10px;
    dl {
      padding: 10px 0;
      clear: both;
      &:after {
        height: 0;
        overflow: hidden;
        content: '.';
        clear: both;
        display: block;
      }
    }
    dt {
      float: left;
      margin-right: 10px;
      width: 130px;
      line-height: 36px;
      font-size: 14px;
      text-align: right;
    }
    dd {
      float: left;
      padding-right: 10px;
      position: relative;
      .r_input {
        position: relative;
        width: 283px;
        height: 28px;
        line-height: 28px;
        padding-left: 10px;
        vertical-align: middle;
        font-size: 14px;
        color: #333;
        border-color: #ccc;
        &.input_country-code {
          min-width: 80px;
          max-width: 300px;
          width: auto;
          padding-right: 40px;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: inline-block;
          overflow: hidden;
          ::v-deep .link_code {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 40px;
            background-position: 0 -40px;
          }
        }
        &.input_country-code_num {
          width: 140px;
          margin-left: 10px;
          display: inline-block;
        }
        &.input_auth-code {
          width: 188px;
          padding-right: 100px;
          a {
            position: absolute;
            right: 0;
            top: 0;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 12px;
          }
        }
        &.input_auth-code input {
          border: none;
          width: 170px;
          height: 28px;
          line-height: 28px;
          outline: 0;
          font-size: 14px;
        }
      }
      .slider {
        position: relative;
        display: block;
        width: 300px;
        height: 40px;
        background: rgb(235, 235, 235);
        border-radius: 2px;
        // .drag {
        //   width: 100%;
        // }
      }
    }
    .base_label {
      border-bottom: 1px solid transparent;
      cursor: pointer;
      a {
        color: #999;
      }
    }
    .reg_btn {
      background-color: #ff9a14;
    }
    .reg_btn,
    .reg_btn_disabled {
      margin-bottom: 8px;
      width: 220px;
      height: 42px;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      text-align: center;
      border: 0 none;
      border-radius: 4px;
      *filter: chroma(color=#000);
      clear: both;
    }
  }
}
</style>